<template>
  <div id="center-page" :style="{height:(this.getWinSize().height-this.getSafeArea().top-91)+'px'}">
    <div class="top">
      <div class="setup" :style="{top:(this.getSafeArea().top+5)+'px'}" @click="$router.push('/MemberSetup')">
        <i class="el-icon-s-tools"></i>
      </div>
    </div>
    <!--会员信息区域-->
    <div id="user-info-box">
      <i id="setup-button" class="icon iconfont icon-shezhi" @click="$router.push('/Setup')"></i>
      <!--会员头像-->
      <div id="icon-box">
        <img :src="userInfo.icon" style="width: 50px; height: 50px;" alt="">
        <div id="nickname" v-show="userInfo.nickname" v-text="userInfo.nickname" class="ovd_s"></div>
        <div id="nickname" v-show="!userInfo.nickname" v-text="'未登录，点击登录'" style="line-height: 40px; color: #EEEEEE; font-size: 16px;" @click="$router.push('/Login')"></div>

        <member-level-icon v-if="userInfo.level>-1" :show-type="1" :level="userInfo.level?userInfo.level:0" :is-vip="userInfo.isVip"/>
      </div>
      <!--其他信息-->
      <div id="other-box">
        <div class="money item">
          <i class="el-icon-s-finance" @click="$router.push({name:'MemberLog',query:{type:'moneyLog'}})"></i>
          <div class="name">余额</div>
        </div>
        <div class="collection item" @click="$router.push({name:'MemberLog',query:{type:'scoreLog'}})">
          <i class="el-icon-s-goods"></i>
          <div class="name">积分</div>
        </div>
        <div class="view-record item"
             @click="$router.push({name:'MemberLog',query:{type:'commissionLog'}})">
          <i class="el-icon-s-cooperation"></i>
          <div class="name">佣金</div>
        </div>
        <div class="view-record item" @click="$router.push({name:'MemberCoupon'})">
          <i class="el-icon-s-ticket"></i>
          <div class="name">优惠券</div>
        </div>
      </div>
    </div>

    <!--最新订单信息区域-->
    <div id="order-box" :style="{
      marginLeft:((this.getWinSize().height*0.012).toFixed(0))+'px'
    }">
      <div class="title-box" @click="$router.push('/OrderList')">
        <div class="title">我的订单</div>
        <div class="more">查看全部 <i class="el-icon-arrow-right"></i></div>
      </div>
      <div id="order-status-button-box">
        <div class="item" v-for="(statusItem,index) in statusArr" @click="$router.push({
        name:'OrderList',
        query:{
          status:statusItem.key
        }
        })">
          <i class="iconfont" :class="statusIconMap[statusItem.key]"></i>
          <div class="name">
            <span class="name-span">{{ statusItem.name }}</span>
            <span class="nums-span" v-if="userInfo.orderNums[statusItem.key+'Nums']>0">({{
                userInfo.orderNums[statusItem.key + 'Nums']
              }})</span>
          </div>
          <!--          <div class="nums" :class="userInfo.orderNums[statusItem.key]>0?'curr':''">{{ userInfo.orderNums[statusItem.key] }}</div>-->
        </div>
      </div>
      <!--      <div id="new-order-list">
              <div class="item" v-for="i in 3">
                <i class="icon iconfont icon-youjiantou"></i>
                <img :src="'./static/images/product-1.jpg'" alt="">
                <div class="info-box">
                  <div class="time">2021年10月21日07:25:45</div>
                  <div class="info">您的快件已经到达 西安转运中心</div>
                </div>
                <div class="c"></div>
              </div>
            </div>-->
    </div>

    <div style="position: relative; overflow-x: hidden; overflow-y: auto; float: left; width: 100%;" :style="{
      height: (this.getWinSize().height-this.getSafeArea().top-435)+'px'
    }">
    <!--菜单1-->
    <div class="menu-box">
      <div class="item" @click="$router.push('/MemberShopCollectList')">
        <div class="name">店铺收藏</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="$router.push('/MemberProductCollectList')">
        <div class="name">商品收藏</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="$router.push('/ChatList')">
        <div class="name">
          聊天会话
          <span class="un-read-session-nums" v-text="unReadSessionNums" v-if="unReadSessionNums>0"></span>
        </div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>


    <!--菜单2-->
    <div class="menu-box">
      <div class="item" v-if="getIsShifu()" @click="$router.push('/ShopProductPurchaseList')">
        <div class="name">采购订单</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="useMoneyCard">
        <div class="name">使用充值卡</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="recharge">
        <div class="name">充值</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="$router.push('/MemberPromotion')">
        <div class="name">我的推广</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="$router.push('/MessageList')">
        <div class="name">我的消息</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="contactSystemUser">
        <div class="name">举报反馈</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="showPrivacyAgreementDialog">
        <div class="name">隐私协议</div>
        <div class="icon">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
    </div>
    <div class="c"></div>


    <!--    <div id="recommend-list">-->
    <!--      <el-divider><i class="el-icon-s-goods"></i> 推荐商品</el-divider>-->
    <!--      <div class="product-list">-->
    <!--        <product-list-item v-for="(product,key) in productList" :key="key" :curr-product="product" :show-type="0"/>-->
    <!--        <div class="c"></div>-->
    <!--      </div>-->
    <!--    </div>-->


    <my-privacy-agreement-dialog ref="my-privacy-agreement-dialog" />
  </div>
</template>

<script>
import ProductListItem from '../common/ProductListItem'
import MyPrivacyAgreementDialog from '../common/MyPrivacyAgreementDialog'
import MemberLevelIcon from '../common/MemberLevelIcon'

export default {
  name: 'Center',
  components: {MemberLevelIcon, MyPrivacyAgreementDialog, ProductListItem},
  mounted () {
    let $this=this
    // return
    if ($this.CurrUser.IsLogin()){
      setTimeout(function () {
        $this.getInfo()
      },1300)
      setTimeout(function () {
        $this.getUnReadSessionNums()
      },500)
    }

    var memberInfoCache=localStorage.getItem('MemberInfo')
    if (memberInfoCache && memberInfoCache.length>0){
      var tmpMember=JSON.parse(memberInfoCache)
      this.userInfo.icon=tmpMember.icon
      this.userInfo.nickname=tmpMember.nickname
      this.userInfo.level=tmpMember.level
      this.userInfo.isVip=tmpMember.isVip
    }
    // console.log('memberInfoCache',memberInfoCache)
    // this.getProductList()

    // this.userInfo = demoData.member
    // this.productList = demoData.productList
  },
  data: function () {
    return {
      unReadSessionNums:0,
      userInfo: {
        icon: './static/no-user.png',
        nickname: '',
        money: -1,
        level: -1,
        score: 0,
        isVip: false,
        orderNums: {'count': 0, needPayNums: 0, needSendNums: 0, needReceiveNums: 0, needReplyNums: 0, applyNums: 0},
      },
      productList: [],
      statusArr: dict.OrderStatusNameArr,
      statusIconMap:
        {
          needPay: 'icon-daifukuan',
          needSend: 'icon-fahuo',
          needReceive: 'icon-yishouhuo',
          needReply: 'icon-daipingjia',
          apply: 'icon-tuihuanhuo',
        }

    }
  },
  methods: {
    // 展示隐私协议
    showPrivacyAgreementDialog:function () {
      if (!this.CurrUser.IsLogin()){
        return this.$router.push('/Login')
      }
      this.$refs['my-privacy-agreement-dialog'].open(true)
    },
    contactSystemUser:function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/checkAndGetMessageSession', {userType: "SysUser",mainId:0}, function (data) {
        if (data && data.id){
          $this.$router.push({
            name:'Chat',
            query:{
              chatSessionId:data.id
            }
          })
        }
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
    recharge:function () {
      if (!this.CurrUser.IsLogin()){
        return this.$router.push('/Login')
      }
      this.bus.$emit('MemberRechargeDialogCallBus')
    },
    useMoneyCard: function () {
      if (!this.CurrUser.IsLogin()){
        return this.$router.push('/Login')
      }
      this.$prompt('请输入 充值卡号', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\d]{20}?/,
        inputErrorMessage: '充值卡号 不正确'
      }).then(({value}) => {
        let $this = this
        $this.MyRequest($this.ApiDoNameMember + 'Member/useMoneyCard', {cardNumber: value}, function (data) {
          $this.successTip('充值成功!')
          $this.$router.push({name: 'MemberLog', query: {type: 'moneyLog'}})
          $this.$forceUpdate()
        }, function (msg) {
          $this.$message.error(msg)
          // $this.form.password = ''
        })
      })
    },
    // 获取-个人信息
    getInfo: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/info', {}, function (data) {
        $this.userInfo.nickname = data.nickname
        $this.userInfo.icon = data.icon
        $this.userInfo.level = data.level
        $this.userInfo.score = data.score
        $this.userInfo.money = data.money
        $this.userInfo.orderNums = data.orderNums
        $this.userInfo.isVip = data.isVip
        $this.CurrUser.isShifu = data.bindingShopNums > 0
        // $this.userInfo.orderNums = JSON.parse(data.orderNums)
        // console.log('data', data)
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
    // 获取-未读会话-数量
    getUnReadSessionNums: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/getUnReadSessionNums', {}, function (data) {
        $this.unReadSessionNums=data
        // console.log('data', data)
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
  }
}
</script>

<style scoped>

</style>
